<template>
  <div class="container">
    <el-card 
      class="box-card mb-20"
      v-for="(article) in articleList" 
      :key="article.id">
      <div class="item">
        <h4>{{article.title}}</h4>
      </div>
      <div class="text item">
        {{article.content}}
      </div>
      <div class="footer">
        <span class="time">发布时间：{{article.create_time}}</span>
        <div class="ml-16">
          <el-button type="" size="mini" @click="updateArticle(article)">修改</el-button>
          <el-popconfirm
            title="确定删除吗？"
            @confirm=handlerDeleteArticle(article.id)
          >
            <el-button slot="reference" type="" size="mini" class="ml-6">删除</el-button>
          </el-popconfirm>
        </div>
      </div>
    </el-card>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="curPage"
      :hide-on-single-page="true"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      layout="prev, pager, next, sizes"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleList: [],
      pageSize: 10,
      curPage: 1,
      total: 0,
      keywork: '',
      categoryId: 0,
    }
  },
  computed: {
  },
  methods: {
    async handlerGetData({categoryId,keyWord,page,pageSize} = {}) {
      await this.$store.dispatch('blog/get_blog_data', 
      {
        keyWord,
        categoryId,
        page,
        pageSize,
      })
      this.articleList = this.$store.state.blog.blogList
      this.total = this.$store.state.blog.blogPage.total
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.handlerGetData({
        categoryId: this.categoryId,
        keyWord: this.keywork,
        page: this.curPage,
        pageSize: this.pageSize
      })
      window.scrollTo(0, 0)
    },
    handleCurrentChange(val) {
      this.curPage = val;
      this.handlerGetData({
        categoryId: this.categoryId,
        keyWord: this.keywork,
        page: this.curPage,
        pageSize: this.pageSize
      })
      window.scrollTo(0, 0)
    },
    async handlerDeleteArticle(id) {
      let {data} = await this.$axios({
        method: 'delete',
        url: '/blog?id=' + id,
      })
      if (data.code == 200) {
        this.handlerGetData({
          categoryId: this.categoryId,
          keyWord: this.keywork,
          page: this.curPage,
          pageSize: this.pageSize
        })
        this.$notify({
          title: '成功',
          message: data.msg,
          type: 'success'
        })
      } else {
        this.$notify.error({
          title: '错误',
          message: data.msg,
        });
      }
    },
    updateArticle(article) {
      this.$router.push({
        name: 'update',
        // path:'/dashboard/article/update',
        query:{id:article.id},
        params: {article}
      })
    }
  },
  created () {
    this.handlerGetData()
  }
}
</script>

<style lang="scss" scoped>
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .container {
    .footer {
      display: flex;
      .time {
        line-height: 28px;
      }
    }
  }
</style>